import React from 'react';
import { Form, Input } from 'antd';
import { useUpdateEffect } from 'ahooks';

const FormItem = Form.Item;

// 基本信息
export default ({ form, applicationName, applicationNote, defaultFlag }) => {
  useUpdateEffect(() => {
    const initValues = {
      applicationName,
      applicationNote,
    };
    form.setFieldsValue(initValues);
  }, [applicationName, applicationNote]);

  return (
    <Form
      form={form}
      labelCol={{ span: 4 }}
      wrapperCol={{ span: 20 }}
      colon={false}
      requiredMark={false}
      labelAlign="left"
      autoComplete="off"
      initialValues={{
        applicationName,
        applicationNote,
      }}
    >
      <FormItem
        name="applicationName"
        label="应用名称"
        validateTrigger={['onChange', 'onBlur']}
        required
        rules={[
          {
            required: true,
            message: '请输入应用名称',
          },
        ]}
        tooltip={{
          icon: <i style={{ color: 'red', pointerEvents: 'none' }}>*</i>,
        }}
      >
        <Input
          placeholder="请输入应用名称"
          style={{
            width: '200px',
          }}
          disabled={defaultFlag}
          maxLength={6}
        />
      </FormItem>
      <FormItem name="applicationNote" label="应用说明">
        <Input.TextArea
          disabled={defaultFlag}
          placeholder="请输入100个字以内的应用说明"
          maxLength={100}
        />
      </FormItem>
    </Form>
  );
};
